<template>
  <div class="div">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="provinceName" label="国家名字" width="180" />
      <el-table-column prop="confirmedCount" label="确证" width="180" />
      <el-table-column prop="curedCount" label="治愈" width="180" />
      <el-table-column prop="deadCount" label="死亡" width="180" />
    </el-table>
    <div class="fy">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changesize"
      />
    </div>
  </div>
</template>
<script>
import { yq } from "../../api/dataapi.js";
import { reactive, toRefs, onMounted } from "vue";
export default {
  setup() {
    const data = reactive({
      tableData: [],
      total: 0,
    });
    let changesize = (a) => {
      getData((a - 1) * 10, a * 10);
    };
    let getData = (num1, num) => {
      yq().then((r) => {
        data.tableData = r.data.newslist.splice(num1, num);
        data.total = r.data.newslist.length;
      });
    };
    onMounted(() => {
      getData();
    });
    return {
      ...toRefs(data),
      changesize,
      
    };
  },
};
</script>
<style scoped>
.div {
  width: 900px;
}
</style>